<template>
    <div class="index-back">
        <div v-if="openid">
            <div style="height: 15px;"></div>
            <div class="my-swipe-div" :style="'height:' + swiperHeight + 'px;'">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"
                    :style="'height:' + swiperHeight + 'px;'">
                    <van-swipe-item v-for="item in advImgList" v-bind:key="item" :style="'height:' + swiperHeight + 'px;'">
                        <img style="width:100%;height:100%;" :src="item">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div style="height: 15px;"></div>
            <table style="width: 100%;">
                <tr>
                    <td style="width: 3%;"></td>
                    <td>
                        <div class="custom-nan custom-hezi">
                            <div class="custom-hezi-title">男生盒子</div>
                            <div class="custom-add-btn" @click="onClickAddGood(1)">放入1张男生纸条</div>
                            <div class="custom-cq-btn" @click="onClickGetGood('sex_male_1')">抽取1张男生纸条</div>
                            <div class="custom-cq-more">
                                <div class="cq-s-div" @click="onClickGetGood('sex_male_5')">抽5次</div>
                                <div class="cq-s-div cs-s-div-10" @click="onClickGetGood('sex_male_10')">抽10次</div>
                            </div>
                            <div style="width: 100%;height: 20px; clear: both;"></div>
                        </div>
                    </td>
                    <td style="width: 3%;"></td>
                    <td>
                        <div class="custom-nv custom-hezi">
                            <div class="custom-hezi-title">女生盒子</div>
                            <div class="custom-add-btn" @click="onClickAddGood(2)">放入1张女生纸条</div>
                            <div class="custom-cq-btn" @click="onClickGetGood('sex_female_1')">抽取1张男生纸条</div>
                            <div class="custom-cq-more">
                                <div class="cq-s-div" @click="onClickGetGood('sex_female_5')">抽5次</div>
                                <div class="cq-s-div cs-s-div-10" @click="onClickGetGood('sex_female_10')">抽10次</div>
                            </div>
                            <div style="width: 100%;height: 20px; clear: both;"></div>
                        </div>
                    </td>
                    <td style="width: 3%;"></td>
                </tr>
            </table>

            <!-- 放入 -->
            <van-popup v-model:show="showAddPaper" round position="bottom" closeable>
                <add-paper v-if="showAddPaper" :sex="sex" :good="addPaperGood" :openid="openid"
                    @addPaperOrder="addPaperOrder"></add-paper>
            </van-popup>

        </div>
        <div v-else>加载中,请稍后...</div>
    </div>
</template>
<style scoped>
.index-back {
    text-align: center;
}

.good-item-list {
    background-color: #70f3ff;
    cursor: pointer;
}


.my-swipe-div {
    width: 94%;
    margin-left: 3%;
    overflow: hidden;
}

.my-swipe .van-swipe-item {
    font-size: 20px;
    width: 100%;
    height: 200px;
    text-align: center;
}

.custom-hezi-title {
    font-size: 14px;
    font-weight: bold;
    color: red;
    height: 40px;
    line-height: 40px;
    background-color: rgba(255, 235, 205, 0.8);
    margin-bottom: 20px;
}

.custom-cq-more {
    width: 80%;
    height: 30px;
    line-height: 30px;
    margin: 10px auto;
    font-size: 13px;
    color: white;
}

.cs-s-div-10 {
    margin-left: 10%;
}

.cq-s-div {
    width: 45%;
    float: left;
    background: linear-gradient(to right, #44cef6, #70f3ff);
    border-radius: 10px;
    cursor: pointer;
}

.custom-add-btn {
    width: 80%;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    font-size: 13px;
    background: linear-gradient(to right, #d8f0af, #dff1c1);
    margin: 10px auto;
    color: black;
    cursor: pointer;
}

.custom-cq-btn {
    width: 80%;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    font-size: 13px;
    background: linear-gradient(to right, #44cef6, #70f3ff);
    margin: 10px auto;
    color: white;
    cursor: pointer;
}

.custom-hezi {
    width: 100%;
    border-radius: 10px;
    border: 2px solid #eee;
    overflow: hidden;
}

.custom-nan {
    background: url('../../assets/image/nan.jpg');
    background-size: cover;
}

.custom-nv {
    background: url('../../assets/image/nv2.jpg');
    background-size: cover;
}

.custom-nv {
    background-color: blue;
}
</style>
<script>
import AddPaper from './components/addPaper'
import { getGoodList } from '@/api/phone/good'
import { saveOrder } from '@/api/phone/order'

let currDomain = "http://127.0.0.1:8080"
let isWx = true

export default {
    name: "indexA",
    components: {
        AddPaper
    },
    data() {
        return {
            openid: null,
            glist: [],
            swiperHeight: 200,
            advImgList: [],
            showAddPaper: false,
            sex: 2,
            addPaperGood: {}
        }
    },
    created() {
        this.initPage()
    },
    methods: {
        initPage() {
            this.advImgList = ['https://simhaoka.com/profile/upload/comm/seller_benner.png', 'https://simhaoka.com/profile/upload/comm/seller_benner.png']
            this.setSwipeWidth()

            console.info("进入初始化方法...")
            let localOpenid = localStorage.getItem("openid")
            if (!localOpenid) {
                console.info("本地openid为空")
                let openid = this.$route.query.oid
                if (openid) {
                    let flag = localStorage.getItem("openidFlag")
                    if (flag == "true") {
                        this.setOpenid(openid)
                        localStorage.setItem("openid", openid);
                    } else {
                        this.linkWxAuth()
                    }
                } else {
                    this.linkWxAuth()
                }
            } else {
                console.info("本地openid不为空")
                this.setOpenid(localOpenid)
            }
        },
        setSwipeWidth() {
            var pmkd = document.body.clientWidth
            //console.info("宽度：" + pmkd)
            this.swiperHeight = pmkd * 0.438
        },
        setOpenid(openid) {
            this.openid = openid

            getGoodList().then(res => {
                console.info("微信：", res)
                this.glist = res.data
            })
        },
        linkWxAuth() {
            if (isWx) {
                localStorage.setItem("openidFlag", "true")
                window.location.href = currDomain + "/h5/wxauth/authorize"
            } else {
                this.setOpenid("oO8sn6FasvDxGY0ZXUTsh9rZBRRs")
            }
        },
        createOrder(orderType, goodCode, userIncreasePaper) {
            const toast1 = showToast({ type: "loading", message: "加载中", forbidClick: true, duration: 0 })
            let pa = { orderType: orderType, openid: this.openid, goodCode: goodCode, userIncreasePaper: userIncreasePaper }
            saveOrder(pa).then(res => {
                toast1.close();
                if (res.status == 200) {
                    if (this.showAddPaper) {
                        this.showAddPaper = false
                    }
                    if (res.data.needPayFlag === 1) {
                        console.info("订单号：", res.data.orderNo)
                        const config = res.data.paras; // 从服务器获取到微信配置参数

                        if (config && typeof WeixinJSBridge !== 'undefined') {
                            this.initWxPayment(config);
                        } else {
                            document.addEventListener('WeixinJSBridgeReady', () => {
                                this.initWxPayment(config);
                            });
                        }
                    } else {
                        showToast({ type: "text", message: "操作成功" })
                    }

                    //根据orderType做操作
                    //TODO
                } else {
                    showToast({ type: "text", message: "失败，请重试" })
                }
            })
        },
        initWxPayment(config) {
            config.package = config.packageVal
            WeixinJSBridge.invoke('getBrandWCPayRequest', { ...config }, (result) => {
                if (result.errMsg === "get_brand_wcpay_request:ok") {
                    // 支付成功处理逻辑
                    console.info("支付成功")

                } else {
                    // 支付失败处理逻辑
                    console.info("支付失败")
                }
            });

            WeixinJSBridge.on("closeWindow", function () {
                // 页面被关闭时的处理逻辑
            });
        },
        //点击增加按钮
        onClickAddGood(gender) {
            this.sex = gender

            for (let i = 0; i < this.glist.length; i++) {
                let element = this.glist[i]
                if (gender === 1 && element.goodCode === 'add_sex_male_1') {
                    //男
                    this.addPaperGood = element
                    break;
                }

                if (gender === 2 && element.goodCode === 'add_sex_female_1') {
                    //女
                    this.addPaperGood = element
                    break;
                }
            }

            this.showAddPaper = true
        },
        //点击抽取按钮
        onClickGetGood(goodCode) {
            this.createOrder(2, goodCode, null)
        },
        //填写纸条信息后返回
        addPaperOrder(paper) {
            this.createOrder(1, this.addPaperGood.goodCode, paper)
        },

    }
}

</script>
  